<div id="app">
    <!-- 
        修饰符用于指出一个指令应该以特殊方式绑定。
        .prevent 修饰符告诉 v-on 指令：阻止表单默认的提交行为，阻止 a 标签的的默认跳转行为
     -->
    <form action="save" v-on:submit.prevent="check()">
        姓名：<input type="text" v-model="user.username">
        <button type="submit">保存</button>
    </form>
    <a href="https://www.baidu.com" @click.prevent="jump()"></a>

    <hr>

    <!-- 
        .stop 修饰符表示阻止事件冒泡 
        如果不加 .stop，点击 button 按钮，不仅会调用 btnHandler 方法，还会调用 divHandler 方法，
        加上 .stop 后就只调用 btnHandler 方法
    -->
    <div style="height: 100px;background-color: aquamarine;line-height: 100px;padding-left: 100px;" @click="divHandler">
        <button style="margin: 40px auto;" @click.stop="btnHandler">按钮</button>
    </div>

    <!-- 常用的事件修饰符就是 .prevent 和 .stop，除此以外还有 .capture/.once/.self -->

    <hr>

    <!-- 
        按键修饰符
        .enter 修饰符表示只有在 key 是 Enter 时调用方法
        .esc 修饰符表示只有在 key 是 Esc 时调用方法
     -->
    Enter：<input type="text" @keyup.enter="submit">
    Esc：<input type="text" @keyup.esc="clear">

</div>

<script src="./lib/vue-2.6.12.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            user: {}
        },
        methods: {
            check() {
                console.log(this.user.username)
                if (!this.user.username) {
                    alert('请输入姓名')
                    return
                }
                //ajax提交
                console.log('ajax提交')
            },
            jump() {
                console.log('阻止a标签的默认行为！')
            },
            divHandler() { 
                console.log('divHandler')
            },
            btnHandler() { 
                console.log('btnHandler')
            },
            submit() {
                console.log('keyup.enter')
            },
            clear() {
                console.log('keyup.esc')
            }
        }
    })
</script>